<template>
  <el-form class="login-form"
           status-icon
           :rules="loginRules"
           ref="loginForm"
           :model="loginForm"
           label-width="0"
           @keyup.enter.native="handleLogin">
    <el-form-item prop="adminName">
      <el-input size="small"
                v-model="loginForm.adminName"
                auto-complete="off"
                placeholder="请输入账号">
        <i slot="prefix"
           class="el-icon-user"></i>
      </el-input>
    </el-form-item>
    <el-form-item prop="adminPassword">
      <el-input size="small"
                :type="passwordType"
                v-model="loginForm.adminPassword"
                auto-complete="off"
                placeholder="请输入密码">
        <i class="el-icon-view el-input__icon"
           slot="suffix"
           @click="showPassword"></i>
        <i slot="prefix"
           class="el-icon-lock"></i>
      </el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"
                 size="small"
                 @click.native.prevent="handleLogin"
                 class="login-submit"
                 :loading="loading">
        <span v-if="!loading">登录</span>
        <span v-else-if="loading">登录中...</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: "userlogin",
  data() {
    return {
      httpUrl: this.GLOBAL.httpUrl,

      loginForm: {
        adminName: "",
        adminPassword: "",
      },
      loading: false,
      loginRules: {
        adminName: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        adminPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ]
      },
      passwordType: "password"
    };
  },
  created() {
  },
  mounted() {},
  computed: {

  },
  props: [],
  methods: {
    showPassword() {
      this.passwordType == ""
        ? (this.passwordType = "password")
        : (this.passwordType = "");
    },
    handleLogin() {
      let _this = this;
      _this.loading = true
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$axios.post(this.httpUrl + '/admin/login', _this.qs.stringify(this.loginForm))
                  .then(res=>{
                    if(res.data.status == 200){
                      _this.$message.success('登录成功');
                      sessionStorage.setItem("ms_username", this.loginForm.adminName)
                      sessionStorage.setItem("adminId", res.data.data);
                      _this.$router.push({
                        path:'/'
                      });
                    }else{
                      _this.$message.warning('用户名或密码错误');
                    }
                    _this.loading = false
                  }).catch(error=>{
            this.$message.error('登录异常');
            _this.loading = false
          })
        } else {
          _this.$message.error('请输入用户名和密码');
          _this.loading = false
          return false;
        }
      });
    }
  }
};
</script>

<style>
</style>
